<template>
    <Row id="article">
        <Card class="articlecard">
            <Tabs>
                <TabPane v-for="(v,i) in tablist" :key="v.i" :label="v.title" v-if="i<5">
                    <Col :md="{span:24}" :xs="{span:24}" v-for="(vv,ii) in article[v.text]" :key="vv.ii" v-if="ii<4" style="margin-top: 15px;">
                        <router-link :to="'/article/'+vv.id" class="text">
                            <Card dis-hover class="list_box">
                                <p class="text">{{vv.title}}</p>
                                <Row type="flex" justify="end">
                                    <span class="time">{{vv.time}}</span>
                                </Row>
                            </Card>
                        </router-link>
                    </Col>
                </TabPane>
            </Tabs>
        </Card>
    </Row>
</template>

<script>
    export default {
        name: "ArticleBox",
        data() {
            return {
                'tablist': '',
                'article': ''
            }
        },
        methods: {
            getlist() {
                this.$axios({
                    method: 'post',
                    url: 'tp5_jzt-blog_server/public/index.php/home/articlelist',
                }).then((res) => {
                    console.log('文章分类数据：',res.data);
                    this.tablist = res.data
                }).catch((error) => {
                    console.log(error)
                })
            },
            getarticle() {
                this.$axios({
                    method: 'post',
                    url: 'tp5_jzt-blog_server/public/index.php/home/articledata',
                }).then((res) => {
                    console.log('文章列表数据：',res.data);
                    this.article = res.data
                }).catch((error) => {
                    console.log(error)
                })
            },
        },
        created() {
            this.getlist();
            this.getarticle();
        },
        mounted() {}
    }
</script>

<style scoped>
    #article{
        width: 100%;
        height: 100%;
        padding: 15px;
    }
    .articlecard{
        width: 100%;
        height: auto;
        overflow-y: auto;
    }
    .list_box{
        margin:5px;
        color: #000 !important;
    }
    .list_box:hover{
        border: 1px solid #2D8CF0 !important;
        color: #2D8CF0 !important;
    }
    .list_box .text{
        padding: 5px;
        font-size:16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .list_box .time{
        font-size: 12px;
    }
</style>
